<template>
  <a-spin :spinning="loading" class="w-full">
    <div class="ml-1 mt-2">
      <table>
        <tbody>
          <tr>
            <th colspan="4" class="h-bgc h-text">右眼（OD）</th>
            <th colspan="4" class="h-bgc h-text">左眼（OS）</th>
          </tr>
          <tr>
            <td class="w-28 b-text-title">远视力（裸眼）</td>
            <td class="w-28 b-text-title">{{ resourceData.mBLJLB_SL ? (resourceData.mBLJLB_SL.lysl_y_od ? resourceData.mBLJLB_SL.lysl_y_od : '-') : '-' }}</td>
            <td class="w-28 b-text-title">近视力（裸眼）</td>
            <td class="w-28 b-text-title">{{ resourceData.mBLJLB_SL ? (resourceData.mBLJLB_SL.lysl_j_od ? resourceData.mBLJLB_SL.lysl_j_od : '-') : '-' }}</td>
            <td class="w-28 b-text-title">远视力（裸眼）</td>
            <td class="w-28 b-text-title">{{ resourceData.mBLJLB_SL ? (resourceData.mBLJLB_SL.lysl_y_os ? resourceData.mBLJLB_SL.lysl_y_os : '-') : '-' }}</td>
            <td class="w-28 b-text-title">近视力（裸眼）</td>
            <td class="w-28 b-text-title">{{ resourceData.mBLJLB_SL ? (resourceData.mBLJLB_SL.lysl_j_os ? resourceData.mBLJLB_SL.lysl_j_os : '-') : '-' }}</td>
          </tr>
          <tr>
            <td class="w-28 b-text-title">远视力（矫正）</td>
            <td class="w-28 b-text-title">{{ resourceData.mBLJLB_SL ? (resourceData.mBLJLB_SL.jzsl_y_od ? resourceData.mBLJLB_SL.jzsl_y_od : '-') : '-' }}</td>
            <td class="w-28 b-text-title">近视力（矫正）</td>
            <td class="w-28 b-text-title">{{ resourceData.mBLJLB_SL ? (resourceData.mBLJLB_SL.jzsl_j_od ? resourceData.mBLJLB_SL.jzsl_j_od : '-') : '-' }}</td>
            <td class="w-28 b-text-title">远视力（矫正）</td>
            <td class="w-28 b-text-title">{{ resourceData.mBLJLB_SL ? (resourceData.mBLJLB_SL.jzsl_y_os ? resourceData.mBLJLB_SL.jzsl_y_os : '-') : '-' }}</td>
            <td class="w-28 b-text-title">近视力（矫正）</td>
            <td class="w-28 b-text-title">{{ resourceData.mBLJLB_SL ? (resourceData.mBLJLB_SL.jzsl_j_os ? resourceData.mBLJLB_SL.jzsl_j_os : '-') : '-' }}</td>
          </tr>
          <tr>
            <td class="w-28 b-text-title">眼压</td>
            <td colspan="3">
              <p class="mb-0 b-text-info text-left">
                <span class="b-text-title mr-1">{{ resourceData.mBLJLB_YY ? (resourceData.mBLJLB_YY.yy_od ? resourceData.mBLJLB_YY.yy_od : '-') : '-' }}</span
                >mmHg
              </p>
            </td>
            <td class="w-28 b-text-title">眼压</td>
            <td colspan="3">
              <p class="mb-0 b-text-info text-left">
                <span class="b-text-title mr-1">{{ resourceData.mBLJLB_YY ? (resourceData.mBLJLB_YY.yy_os ? resourceData.mBLJLB_YY.yy_os : '-') : '-' }}</span
                >mmHg
              </p>
            </td>
          </tr>
          <tr>
            <td class="w-28 b-text-title">电脑验光</td>
            <td colspan="3">
              <p class="mb-0 b-text-info text-left">
                <span class="b-text-title mr-px">{{
                  resourceData.listBLJLB_YG_DATA ? (resourceData.listBLJLB_YG_DATA.sph_od ? resourceData.listBLJLB_YG_DATA.sph_od : '-') : '-'
                }}</span
                >DS
                <span class="b-text-title ml-2 mr-px">{{
                  resourceData.listBLJLB_YG_DATA ? (resourceData.listBLJLB_YG_DATA.cyl_od ? resourceData.listBLJLB_YG_DATA.cyl_od : '-') : '-'
                }}</span
                >DC ×
                <span class="b-text-title mr-px">{{
                  resourceData.listBLJLB_YG_DATA ? (resourceData.listBLJLB_YG_DATA.axis_od ? resourceData.listBLJLB_YG_DATA.axis_od : '-') : '-'
                }}</span
                ><span>°</span>
              </p>
            </td>
            <td class="w-28 b-text-title">电脑验光</td>
            <td colspan="3">
              <p class="mb-0 b-text-info text-left">
                <span class="b-text-title mr-px">{{
                  resourceData.listBLJLB_YG_DATA ? (resourceData.listBLJLB_YG_DATA.sph_os ? resourceData.listBLJLB_YG_DATA.sph_os : '-') : '-'
                }}</span
                >DS
                <span class="b-text-title ml-2 mr-px">{{
                  resourceData.listBLJLB_YG_DATA ? (resourceData.listBLJLB_YG_DATA.cyl_os ? resourceData.listBLJLB_YG_DATA.cyl_os : '-') : '-'
                }}</span
                >DC ×
                <span class="b-text-title mr-px">{{
                  resourceData.listBLJLB_YG_DATA ? (resourceData.listBLJLB_YG_DATA.axis_os ? resourceData.listBLJLB_YG_DATA.axis_os : '-') : '-'
                }}</span
                ><span>°</span>
              </p>
            </td>
          </tr>
          <tr>
            <td class="w-28 b-text-title">角膜曲率</td>
            <td colspan="3">
              <p class="mb-0 b-text-info text-left">
                <span class="b-text-title mr-2">{{
                  resourceData.mBLJLB_YBJC ? (resourceData.mBLJLB_YBJC.jmql_hk_od ? resourceData.mBLJLB_YBJC.jmql_hk_od : '-') : '-'
                }}</span>
                @/<span class="b-text-title ml-px mr-2">{{
                  resourceData.mBLJLB_YBJC ? (resourceData.mBLJLB_YBJC.jmql_vk_od ? resourceData.mBLJLB_YBJC.jmql_vk_od : '-') : '-'
                }}</span>
                @<span class="b-text-title ml-px">{{
                  resourceData.mBLJLB_YBJC ? (resourceData.mBLJLB_YBJC.jmql_e_od ? resourceData.mBLJLB_YBJC.jmql_e_od : '-') : ' '
                }}</span>
              </p>
            </td>
            <td class="w-28 b-text-title">角膜曲率</td>
            <td colspan="3">
              <p class="mb-0 b-text-info text-left">
                <span class="b-text-title mr-2">{{
                  resourceData.mBLJLB_YBJC ? (resourceData.mBLJLB_YBJC.jmql_hk_os ? resourceData.mBLJLB_YBJC.jmql_hk_os : '-') : '-'
                }}</span>
                @/<span class="b-text-title ml-px mr-2">{{
                  resourceData.mBLJLB_YBJC ? (resourceData.mBLJLB_YBJC.jmql_vk_os ? resourceData.mBLJLB_YBJC.jmql_vk_os : '-') : '-'
                }}</span>
                @<span class="b-text-title ml-px">{{
                  resourceData.mBLJLB_YBJC ? (resourceData.mBLJLB_YBJC.jmql_e_os ? resourceData.mBLJLB_YBJC.jmql_e_os : '-') : '-'
                }}</span>
              </p>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </a-spin>
</template>
<script setup>
defineProps({
  resourceData: {
    type: Object,
    default: () => ({})
  },
  loading: {
    type: Boolean,
    default: false
  }
})
</script>
<style lang="less" scoped>
table {
  width: 100%;
}

table,
th,
td {
  border: 1px solid #eaeaea;
  border-collapse: collapse;
}

th {
  font-weight: normal;
}

th,
td {
  height: 48px;
  padding: 8px;
  text-align: center;
  background-color: #f5f5f5;
}

.h-bgc {
  background-color: #f5f5f5;
}

.h-text {
  color: #000;
  // font-weight: 500;
  font-size: 14px;
}

.b-text-title {
  color: #000;
  font-size: 14px;
}

.b-text-info {
  color: #aaaaaa;
}
</style>
